<template>
  <div class="cateContainer">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        :title="item.cat_name"
        v-for="(item, i) in cataList"
        :key="i"
      />
    </van-sidebar>
    <div class="rightBox">
      <div v-for="(item, i) in avtiveItem" :key="i" class="lv2">
        <span class="lv2-title"
          ><span></span><i>{{ item.cat_name }}</i
          ><span></span
        ></span>
        <div class="vl3-box">
          <div
            class="lv3-item"
            @click="gotoGoods_detail(item1.cat_id)"
            v-for="(item1, i1) in item.children"
            :key="i1"
          >
            <img :src="item1.cat_icon" /> <span>{{ item1.cat_name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCateList } from "@/api/categories";

export default {
  data() {
    return {
      activeKey: null,
      cataList: [],
      avtiveItem: []
    };
  },
  created() {
    this.loadCateList();
  },
  methods: {
    async loadCateList() {
      const data = await getCateList();
      this.cataList = data;
      this.activeKey = 0;
    },
    gotoGoods_detail(i) {
      i = i > 10 ? 1 : i;
      this.$router.push(`/goods_detail/${i}`);
    }
  },
  computed: {},
  watch: {
    activeKey: {
      handler(newVal) {
        if (this.cataList[newVal].children.length > 0) {
          this.avtiveItem = this.cataList[newVal].children;
        } else {
          this.avtiveItem = [];
        }
      }
      // immediate: true
    }
  }
};
</script>

<style lang="less" scoped>
.cateContainer {
  height: 100%;
  padding-bottom: 50px;
  display: flex;
  width: 100%;
  .van-sidebar {
    flex: 2;
    min-width: 80px;
    overflow: scroll;
  }
  .rightBox {
    flex: 8;
    overflow: scroll;
    background-color: #fff;
    // width: 100%;
    .lv2 {
      .lv2-title {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 60px;
        text-align: center;
        font-size: 18px;
        span {
          display: inline-block;
          width: 60px;
          height: 1px;
          background-color: #ccc;
        }
        i {
          font-style: normal;
          margin: 0 10px;
          font-weight: 500;
        }
      }
      .vl3-box {
        display: flex;
        flex-wrap: wrap;
        .lv3-item {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
          img {
            width: 50px;
            height: 50px;
            margin-bottom: 5px;
          }
          span {
            font-size: 13px;
            color: #292d33;
          }
        }
      }
    }
  }
}
</style>
